<template>
	<view class="staff-order-card b-box boxcard" style="margin-bottom: 20rpx;position: relative;">

		<!-- 师傅  订单  列表卡片 -->
		<view
			class="bg-ff b-box "
			style="border-radius: 16rpx;min-height: 420rpx;width: 702rpx;padding: 28rpx 32rpx 0"
		>
			<!--  -->
			<view class="w-100 b-box d-flex flex-r ali-i-c just-s" style="margin-bottom: 28rpx;">
				<view
					style="width:80rpx ;height:80rpx;margin-right: 20rpx;border-radius: 100rpx;overflow: hidden;"
					class="b-box"
				>
					<image
						:src="'https://www.chejingjing.cn' + staffList.userinfo.avatar"
						style="width:80rpx ;height:80rpx"
					></image>
					<image
					@click="toAdd()"
						:src="require('../../static/Group 607@2x.png')"
						style="position: absolute;top: 150rpx;right: 16px;width: 30px;height: 30px;z-index: 999;"
					></image>
				</view>
				<!--  -->
				<view style="width: 600rpx;height: 110rpx;" class="b-box d-flex flex-c ali-i-s just-sw">
					<view class="d-flex flex-r ali-i-c just-sw b-box po-re" style="top:-4rpx;width: 100%;">
						<text class="fw-500 pf-sc c-333 fz-32">{{ staffList.userinfo.nickname }}</text>
						<view class="d-flex flex-r ali-i-c just-e b-box">
							<text
								class="fw-400 pf-sc"
								style="color: #26387C;font-size: 28rpx;margin-right: 16rpx;"
								v-if="staffList.worerstatus == 0"
							>
								待出发
							</text>
							<text
								class="fw-400 pf-sc"
								style="color: #26387C;font-size: 28rpx;margin-right: 16rpx;"
								v-if="staffList.worerstatus == 1"
							>
								已出发
							</text>
							<text
								class="fw-400 pf-sc"
								style="color: #26387C;font-size: 28rpx;margin-right: 16rpx;"
								v-if="staffList.worerstatus == 2"
							>
								已到达
							</text>
							<text
								class="fw-400 pf-sc"
								style="color: #26387C;font-size: 28rpx;margin-right: 16rpx;"
								v-if="staffList.worerstatus == 3"
							>
								待核销
							</text>
							<text
								class="fw-400 pf-sc"
								style="color: #26387C;font-size: 28rpx;margin-right: 16rpx;"
								v-if="staffList.worerstatus == 4"
							>
								待服务
							</text>
							<text
								class="fw-400 pf-sc"
								style="color: #26387C;font-size: 28rpx;margin-right: 16rpx;"
								v-if="staffList.worerstatus == 5"
							>
								已完成
							</text>
						</view>
					</view>
					<view>
						<text
							v-if="staffList.worerstatus != 5 || staffList.xcstatus != 7"
							class="fw-400 pf-sc"
							style="color: #FF5C00;font-size: 28rpx;"
						>
							{{ time > 0 ? '剩余' + time : '' }}
						</text>
					</view>
					<view
						class="d-flex flex-r ali-i-c  b-box po-re"
						style="top: 4rpx;justify-content: space-between;width: 100%;"
					>
						<text class="pf-sc fw-400" style="font-size: 26rpx;color: #666666;">
							距您{{ staffList.distance ? staffList.distance : 0 }}km
						</text>
						<text class="pf-sc fw-400" style="font-size: 20rpx;color: #666666;margin: 0 5;">
							|
						</text>
						<text class="pf-sc fw-400" style="font-size: 26rpx;color: #666666;">
							服务时间{{ fwtime }}
						</text>
					</view>
				</view>
			</view>
			<!--  -->
			<view
				style="min-height: 146rpx;padding-bottom: 26rpx"
				class=" b-box d-flex flex-r ali-i-c just-s"
			>
				<view
					style="width:140rpx ;height:140rpx;margin-right: 16rpx;border-radius:16rpx;overflow: hidden;"
					class="b-box"
				>
					<image :src="staffList.catimage" style="width:140rpx ;height:140rpx"></image>
				</view>
				<!--  -->
				<view style="width: 490rpx;height: 140rpx;" class="b-box d-flex flex-c ali-i-s just-sw">
					<view class="d-flex flex-r ali-i-c just-sw b-box">
						<text class="fw-500 pf-sc c-333 fz-32">{{ staffList.catname }}</text>
					</view>
					<view class="d-flex flex-c ali-i-s just-sw b-box">
						<view
							class="d-flex flex-c ali-i-s just-sw b-box"
							style="display: flex;justify-content: space-between;"
						>
							<view style="display: flex;justify-content: space-between;">
								<view
									class="pf-sc fw-400"
									style="font-size: 26rpx;color: #666666;margin-bottom: 8rpx;width: 130rpx;"
								>
									车辆停靠：
								</view>
								<view
									class="pf-sc fw-400"
									style="font-size: 26rpx;color: #666666;margin-bottom: 8rpx;width: 358rpx;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;"
								>
									{{ staffList.cardesc }}
								</view>
							</view>
						</view>

						<view
							class="pf-sc fw-400"
							style="width: 500rpx; font-size: 26rpx;color: #666666;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;"
						>
							客户备注：{{ staffList.remarks }}
						</view>
					</view>
				</view>
			</view>
			<!-- btn -->
			<view style="height: 98rpx;margin-top: 5rpx;" class="b-box d-flex flex-r ali-i-c just-sw">
				<view class="b-box d-flex flex-r ali-i-c just-s" style="max-width:280rpx ;">
					<text class="fw-400 c-333 pf-sc" style="font-size: 28rpx;">实付：</text>
					<view class="b-box d-flex flex-r ali-i-c just-s">
						<text class="pf-sc fw-500 po-re" style="font-size: 30rpx;color: #FF5C00;font-weight: 700;">
							¥
						</text>
						<text class="pf-sc fw-600" style="font-size: 28rpx;color: #FF5C00;font-weight: 700;">
							{{ staffList.money }}
						</text>
					</view>
				</view>
				<!-- 等于0按钮显示的文字 -->
				<view
					class="b-box d-flex flex-r ali-i-c just-sw"
					style="width: 366rpx;"
					v-if="staffList.worerstatus == 0"
				>
					<u-button
						:throttleTime="700"
						@click="Contact"
						color="#26387C"
						plain
						:customStyle="{
							height: '68rpx',
							width: '170rpx',
							font: '500 28rpx PingFang SC',
							borderRadius: '44rpx'
						}"
						shape="square"
						text="联系用户"
					></u-button>
					<u-button
						:throttleTime="700"
						:customStyle="{
							height: '68rpx',
							width: '170rpx',
							font: '500 28rpx PingFang SC',
							color: '#ffffff',
							borderWidth: '0rpx',
							background: 'linear-gradient(180deg, #4885C5 0%, #3B52A6 100%)',
							borderRadius: '44rpx'
						}"
						shape="square"
						text="现在出发"
						@click="liveGo(staffList.id)"
					></u-button>
				</view>

				<!-- 等于1按钮显示的文字 -->
				<view
					class="b-box d-flex flex-r ali-i-c just-sw"
					style="width: 366rpx;"
					v-if="staffList.worerstatus == 1"
				>
					<u-button
						:throttleTime="700"
						@click="Contact"
						color="#26387C"
						plain
						:customStyle="{
							height: '68rpx',
							width: '170rpx',
							font: '500 28rpx PingFang SC',
							borderRadius: '44rpx'
						}"
						shape="square"
						text="联系用户"
					></u-button>
					<u-button
						:throttleTime="700"
						:customStyle="{
							height: '68rpx',
							width: '170rpx',
							font: '500 28rpx PingFang SC',
							color: '#ffffff',
							borderWidth: '0rpx',
							background: 'linear-gradient(180deg, #4885C5 0%, #3B52A6 100%)',
							borderRadius: '44rpx'
						}"
						shape="square"
						text="我已到达"
						@click="arriveGo(staffList.id)"
					></u-button>
				</view>

				<!-- 等于2按钮显示的文字 -->
				<view
					class="b-box d-flex flex-r ali-i-c just-sw"
					style="width: 366rpx;"
					v-if="staffList.worerstatus == 2"
				>
					<u-button
						:throttleTime="700"
						@click="Contact"
						color="#26387C"
						plain
						:customStyle="{
							height: '68rpx',
							width: '170rpx',
							font: '500 28rpx PingFang SC',
							borderRadius: '44rpx'
						}"
						shape="square"
						text="联系用户"
					></u-button>
					<u-button
						:throttleTime="700"
						:customStyle="{
							height: '68rpx',
							width: '170rpx',
							font: '500 28rpx PingFang SC',
							color: '#ffffff',
							borderWidth: '0rpx',
							background: 'linear-gradient(180deg, #4885C5 0%, #3B52A6 100%)',
							borderRadius: '44rpx'
						}"
						shape="square"
						text="开始服务"
						@click="saoCode(staffList.id)"
					></u-button>
				</view>

				<!-- 等于3按钮显示的文字 -->
				<view
					class="b-box d-flex flex-r ali-i-c just-sw"
					style="width: 366rpx;"
					v-if="staffList.worerstatus == 3"
				>
					<u-button
						:throttleTime="700"
						@click="Contact"
						color="#26387C"
						plain
						:customStyle="{
							height: '68rpx',
							width: '170rpx',
							font: '500 28rpx PingFang SC',
							borderRadius: '44rpx'
						}"
						shape="square"
						text="联系用户"
					></u-button>
					<u-button
						:throttleTime="700"
						:customStyle="{
							height: '68rpx',
							width: '170rpx',
							font: '500 28rpx PingFang SC',
							color: '#ffffff',
							borderWidth: '0rpx',
							background: 'linear-gradient(180deg, #4885C5 0%, #3B52A6 100%)',
							borderRadius: '44rpx'
						}"
						shape="square"
						text="开始服务"
						@click="saoCode(staffList.id)"
					></u-button>
				</view>

				<!-- 等于4按钮显示的文字 -->
				<view
					class="b-box d-flex flex-r ali-i-c just-sw"
					style="width: 366rpx;"
					v-if="staffList.worerstatus == 4"
				>
					<u-button
						:throttleTime="700"
						@click="Contact"
						color="#26387C"
						plain
						:customStyle="{
							height: '68rpx',
							width: '170rpx',
							font: '500 28rpx PingFang SC',
							borderRadius: '44rpx'
						}"
						shape="square"
						text="联系用户"
					></u-button>
					<u-button
						:throttleTime="700"
						:customStyle="{
							height: '68rpx',
							width: '170rpx',
							font: '500 28rpx PingFang SC',
							color: '#ffffff',
							borderWidth: '0rpx',
							background: 'linear-gradient(180deg, #4885C5 0%, #3B52A6 100%)',
							borderRadius: '44rpx'
						}"
						shape="square"
						text="完成订单"
						@click="completeGo(staffList.id)"
					></u-button>
				</view>

				<!-- 等于4按钮显示的文字 -->
				<view
					class="b-box d-flex flex-r ali-i-c just-sw"
					style="width: 366rpx;"
					v-if="staffList.worerstatus == 5"
				></view>
			</view>
		</view>
	</view>
</template>

<script>
import { workerdone } from '@/common/api.js';
export default {
	name: 'staff-order-card',

	props: {
		staffList: {
			type: Object,
			default: () => {
				return {};
			}
		}
	},
	data() {
		return {
			time: '',
			fwtime: ''
		};
	},
	methods: {
		//计算时间
		getTimes() {
			let a = new Date();
			let aa = parseInt(a.getTime() / 1000);
			let aaa = this.staffList.servertime;
			let times = aaa - aa;
			let shi = parseInt(times / 3600);
			let fen = parseInt((times % 3600) / 60);
			let miao = (times % 3600) % 60;
			this.time = `${shi}时:${fen}分:${miao}:秒`;
			if (times > 0) {
				//倒计时的秒数递减1
				times = times - 1;
				this.time = `${shi > 10 ? shi : '0' + shi}时:${fen > 10 ? fen : '0' + fen}分:${
					miao > 10 ? miao : '0' + miao
				}:秒`;
			} else {
				this.time = '';
			}
		},

		fwTime() {
			let times = this.staffList.servertime;
			if (times === 0 || times == null) {
				return '';
			} else {
				var date = new Date(times * 1000);
				var Y = date.getFullYear() + '-';
				var M =
					(date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-';
				var D = date.getDate() < 10 ? '0' + date.getDate() + ' ' : date.getDate() + ' ';
				var H = date.getHours() + ':';
				var M2 = (date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes()) + ':';
				var S = date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds();
				console.log(Y + M + D + H + M2 + S);
				this.fwtime = Y + M + D + H + M2 + S;
			}
		},
		liveGo() {
			this.$emit('liveGo', this.staffList);
		},
		arriveGo() {
			this.$emit('arriveGo', this.staffList);
		},
		saoCode() {
			this.$emit('saomaCode', this.staffList);
		},
		Contact() {
			this.$emit('Contact', this.staffList);
		},
		completeGo() {
			this.$emit('completeClick', this.staffList);
		}
,
		toAdd(item){
			    console.log(this.staffList.lat)
			    uni.openLocation({
			     latitude: parseFloat(this.staffList.lat),
			     longitude: parseFloat(this.staffList.lon),
			     address: this.staffList.lon.cardesc,
			     success: function() {
			      console.log('success');
			     },
			     fail(err) {
			      console.log("错误", err);
			     }
			    });

		},
	},

	mounted() {
		console.log(this.staffList,'this.staffList');
		//每一秒调用一下事件
		setInterval(() => {
			this.getTimes();
		}, 1000);
		this.fwTime();

	}
};
</script>

<style lang="scss">
.staff-order-card {
}
.boxcard {
	margin-top: 20rpx;
}
</style>
